<template>
    <BaseChartVue :width="width" :height="height" :options="chartData"></BaseChartVue>
  
</template>

<script>
import BaseChartVue from '../BaseChart.vue'
import {userSearch} from "@/api/user";

export default {
    components: {
        BaseChartVue
    },
    data(){
        return{
            condition:{
                phone:'',
                username:'',
                state:0,
            },
            condition1:{
                phone:'',
                username:'',
                state:1,
            },
            currentPage:1,
            displayCount:1000,
            width: '100%',
            height: '100%',
            
            chartData:{
                title: {
                text: '用户状态',
                left: '20%',
                top:'center',
                textStyle: {
                    color: '#000',
                    fontSize: '10',
                }
            },
            tooltip: {
                trigger: 'item'
            },
            grid: {
                left: '0%',
                right: '2%',
                bottom: '0%',
                containLabel: true
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                top:'center'
            },
            series: [
                {
                left: '-100',
                name: '用户',
                type: 'pie',
                radius: ['60%','80%'],
                data:[
                { value: null, name: '激活' },
                { value: null, name: '冻结' },
                ],
                emphasis: {
                    itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                labelLine: {
                    show: false
                },
                label:{
                    show:false
                }
                }
                ]
                
            }
        }

    },
    mounted(){
        this.search()
    },
    methods:{
        search(){
            userSearch(
                this.currentPage,
                this.displayCount,
                this.condition1
            ).then((res)=>{
                this.chartData.series[0].data[0].value = res.data.total ;
            })
            userSearch(
                this.currentPage,
                this.displayCount,
                this.condition
            ).then((res)=>{
                this.chartData.series[0].data[1].value= res.data.total ;
            })
        },
        //获取表格数据
    }

}
</script>

<style>

</style>